<script>
import { NavBar, Grid, GridItem, Image as VanImage, Icon, Tabbar, TabbarItem, Swipe, SwipeItem } from 'vant';
import axios from 'axios';

export default {
  name: "MedicalView",
  components: {
    [NavBar.name]: NavBar,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [VanImage.name]: VanImage,
    [Icon.name]: Icon,
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
  },
  data() {
    return {
      user:{
        username:"",
        phone:"",
        pid:""
      },
      operationItems: [
        {text: '运维工单', icon: 'todo-list-o', color: '#1989fa', path: '/workorder'},
        {text: '巡检计划', icon: 'notes-o', color: '#1989fa', path: '/xunjian'},
        {text: '寻找设备', icon: 'chart-trending-o', color: '#1989fa', path: '/xunlu'},
        {text: '运维报修', icon: 'setting-o', color: '#1989fa', path: '/workorderbaoxiu'},
      ],
      cleanItems: [
        {text: '保洁工单', icon: 'delete-o', color: '#1989fa', path: '/workorderbj'},
        {text: '保洁计划', icon: 'calendar-o', color: '#1989fa', path: '/workorderbjjh'},
        {text: '执行记录', icon: 'description', color: '#1989fa', path: '/workorderbjjl'},
        {text: '保洁报单', icon: 'orders-o', color: '#1989fa', path: '/workorderbd'},
      ],
      transportItems: [
        {text: '运送工单', icon: 'description', color: '#1989fa', path: '/ticket'},
        {text: '财务结算', icon: 'logistics', color: '#1989fa', path: '/payment'},
        {text: '执行记录', icon: 'records', color: '#1989fa', path: '/inspection'},
        {text: '运送申请', icon: 'edit', color: '#1989fa', path: '/transport-request'},
      ],
      energyItems: [
        {text: '能耗统计', icon: 'chart-trending-o', color: '#1989fa', path: '/consume'},
        {text: '数据集抄', icon: 'cluster-o', color: '#1989fa', path: '/centralized'},
        {text: '能耗预警', icon: 'warning-o', color: '#1989fa', path: '/warning'},
        {text: '能耗分析', icon: 'bar-chart-o', color: '#1989fa', path: '/overview'},
      ],
      securityItems: [
        {text: '预警事件', icon: 'warning-o', color: '#1989fa', path: '/safe'},
      ],
      active: 0,
      banners: [
        {
          id: 1,
          image: 'https://bimgurl.oss-cn-beijing.aliyuncs.com/user/2024/12/09/1518ebc01ed64a8a80f96c81aee8488c.png',
          title: '医院外观'
        },
        {
          id: 2,
          image: 'https://bimgurl.oss-cn-beijing.aliyuncs.com/user/2024/12/09/e474781c0d454604a4cfd66a33cdeeb6.png',
          title: '医院内景'
        },
        {
          id: 3,
          image: 'https://bimgurl.oss-cn-beijing.aliyuncs.com/user/2024/10/31/062c19037806411da02f81eed551ece4.png',
          title: '先进设备'
        }
      ],
      weather: {
        temp: '--',
        text: '未知',
        humidity: '--',
        windDir: '--',
        windSpeed: '--',
        icon: '100'
      },
      scenicSpot: {
        name: '超级马里奥医疗医院',
        location: {
          longitude: 116.209128,
          latitude: 40.136332
        }
      },
    }
  },
  created() {
    this.user.username = this.$route.query.username;
    this.user.phone=this.$route.query.phone;
    this.user.pid=this.$route.query.pid;
    console.log(this.user);
    localStorage.setItem("aa", JSON.stringify(this.user));

    this.initWeather();
  },
  methods: {

    scanCode() {
      console.log('浏览器信息', navigator.userAgent);
      this.$router.push({
        path: '/ScanCodePage'
      });
    },

    handleItemClick(path) {
      // 可以在这里添加跳转前的逻辑，比如权限检查
      if (path) {
        this.$router.push(path);
      } else {
        this.$toast('功能开发中...');
      }
    },

    handleChatGPT() {
      this.$toast('正在接入ChatGPT...')
      // 这里可以添加跳转到ChatGPT对话页面的逻辑
      this.$router.push('/chatgpt')
    },

    goToWeatherPage() {
      this.$router.push('/weather'); // 跳转到天气页面
    },
  }
}
</script>

<template>
  <div class="medical-view">
    <!--    <van-icon name="scan" @click="scanCode" style="margin-left: 600px;" size="40"/>-->
    <!-- 顶部导航栏 -->
    <van-nav-bar class="nav-bar">
      <template #left>
        <span class="hospital-name" @click="goToWeatherPage">天气</span>
      </template>
      <template #right>
        <div class="right-icons">
          <van-icon name="chat-o" size="20" @click="handleChatGPT" style="margin-right: 10px;"/>
          <van-icon @click="scanCode" name="expand-o" size="20"/>
        </div>
      </template>
    </van-nav-bar>

    <!-- 替换原来的单图为轮播图 -->
    <van-swipe class="banner-swipe" :autoplay="3000" indicator-color="#1989fa">
      <van-swipe-item v-for="banner in banners" :key="banner.id">
        <van-image
            width="100%"
            height="180"
            fit="cover"
            :src="banner.image"
            :alt="banner.title"
        />
      </van-swipe-item>
    </van-swipe>

    <!-- 运维管理模块 -->
    <div class="section">
      <!-- 文字较短时，通过设置 scrollable 属性开启滚动播放 -->
      <van-notice-bar scrollable text="V1.0.3:技术是开发它的人的共同灵魂。"/>
      <div class="section-title">运维管理</div>
      <van-grid :column-num="4" :border="false" :gutter="10">
        <van-grid-item
            v-for="item in operationItems"
            :key="item.text"
            :text="item.text"
            @click="handleItemClick(item.path)"
        >
          <template #icon>
            <van-icon :name="item.icon" :color="item.color" size="26"/>
          </template>
        </van-grid-item>
      </van-grid>
    </div>

    <!-- 保洁管理模块 -->
    <div class="section">
      <div class="section-title">保洁管理</div>
      <van-grid :column-num="4" :border="false" :gutter="10">
        <van-grid-item
            v-for="item in cleanItems"
            :key="item.text"
            :text="item.text"
            @click="handleItemClick(item.path)"
        >
          <template #icon>
            <van-icon :name="item.icon" :color="item.color" size="26"/>
          </template>
        </van-grid-item>
      </van-grid>
    </div>

    <div class="section">
      <div class="section-title">中央运送</div>
      <van-grid :column-num="4" :border="false" :gutter="10">
        <van-grid-item
            v-for="item in transportItems"
            :key="item.text"
            :text="item.text"
            @click="handleItemClick(item.path)"
        >
          <template #icon>
            <van-icon :name="item.icon" :color="item.color" size="26"/>
          </template>
        </van-grid-item>
      </van-grid>
    </div>

    <!-- 能耗管理模块 -->
    <div class="section">
      <div class="section-title">能耗管理</div>
      <van-grid :column-num="4" :border="false" :gutter="10">
        <van-grid-item
            v-for="item in energyItems"
            :key="item.text"
            :text="item.text"
            @click="handleItemClick(item.path)"
        >
          <template #icon>
            <van-icon :name="item.icon" :color="item.color" size="26"/>
          </template>
        </van-grid-item>
      </van-grid>
    </div>

    <!-- 综合安防模块 -->
    <div class="section">
      <div class="section-title">综合安防</div>
      <van-grid :column-num="4" :border="false" :gutter="10">
        <van-grid-item
            v-for="item in securityItems"
            :key="item.text"
            :text="item.text"
            @click="handleItemClick(item.path)"
        >
          <template #icon>
            <van-icon :name="item.icon" :color="item.color" size="26"/>
          </template>
        </van-grid-item>
      </van-grid>
    </div>

    <!-- 底部导航栏 -->
    <van-tabbar v-model="active" fixed route>
      <van-tabbar-item icon="home-o" to="/medical">首页</van-tabbar-item>
      <van-tabbar-item icon="chat-o" dot to="/message">消息</van-tabbar-item>
      <van-tabbar-item icon="contact" to="/my">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<style scoped>
.medical-view {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 50px;
}

.nav-bar {
  background-color: #fff;
}

.hospital-name {
  font-size: 16px;
  font-weight: 500;
  margin-right: 4px;
}

.section {
  margin-top: 12px;
  background-color: #fff;
}

.section-title {
  padding: 12px 16px;
  font-size: 16px;
  font-weight: bold;
  background-color: #1989fa;
  color: #fff;
}

.section-title {
  background-color: #2b5ee3; /* 更改为蓝色背景 */
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 500;
}

:deep(.van-grid-item__icon) {
  color: #2b5ee3; /* 统一图标颜色为蓝色 */
}

:deep(.van-grid-item__content) {
  padding: 12px 8px;
}

:deep(.van-grid-item__text) {
  font-size: 13px;
  margin-top: 6px;
}

:deep(.van-grid) {
  padding: 16px 8px;
}

:deep(.van-grid-item__content) {
  padding: 16px 8px;
}

:deep(.van-grid-item__text) {
  color: #323233;
  font-size: 14px;
  margin-top: 8px;
}

:deep(.van-nav-bar__content) {
  height: 44px;
}

:deep(.van-nav-bar .van-icon) {
  color: #323233;
}

:deep(.van-tabbar) {
  border-top: 1px solid #ebedf0;
}

:deep(.van-tabbar-item) {
  color: #646566;
}

:deep(.van-tabbar-item--active) {
  color: #1989fa;
}

.banner-swipe {
  margin-bottom: 12px;
}

:deep(.van-swipe__indicator) {
  background-color: rgba(255, 255, 255, 0.6);
}

:deep(.van-swipe__indicator--active) {
  background-color: #1989fa;
}

.right-icons {
  display: flex;
  align-items: center;
}

:deep(.van-icon) {
  cursor: pointer;
}

:deep(.van-icon-chat-o) {
  color: #1989fa;
}

.weather-container {
  margin: 16px; /* 添加一些间距 */
  background: #fff;
  border-radius: 12px;
  padding: 20px;
}

.current-weather {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
}

.temperature {
  font-size: 48px;
  font-weight: bold;
  margin-right: 16px;
}

.weather-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.weather-text {
  font-size: 18px;
  color: #323233;
}

.location {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #969799;
  font-size: 14px;
}

.weather-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.detail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #323233;
}

.update-time {
  text-align: center;
  color: #969799;
  font-size: 12px;
  padding: 8px 0;
}
</style>
